<script setup>
import apps from "@/config/application.js";
import {onMounted, ref} from "vue";
import http from "@/util/http-util.js";
import {useRoute,useRouter} from "vue-router";
import {ElMessage} from "element-plus";
const router=useRoute();

const rout=useRouter();


const query = ref({
    roomId:undefined,
    dateKey: undefined
})
const entity = ref({
  dateKey: undefined
});

const yuyue = ref({
  id: undefined,
  roomId:undefined,
  select:undefined,
  dateKey: undefined
})

const selectChange = (r)=>{
  query.value.dateKey = r;
  loadData();
}

const change= (d)=>{
  yuyue.value.select = d.key;
  yuyue.value.id = d.id;
}

const loadData = ()=>{
  http.GET("/consume/roomDetail",query.value).then(rep=>{
    entity.value = rep.data;
  })
}

const submit = ()=>{
  http.POST("/consume/yuYue",yuyue.value).then(rep=>{
    if (rep.code == 0){
      ElMessage.success("预约成功！")
      loadData();
    }
  })
}

const goHome = ()=>{
  rout.push('/consume')
}


onMounted(()=>{
  query.value.roomId = router.query.id;
  yuyue.value.roomId = router.query.id;
  loadData();
})
</script>

<template>
  <div class="room-detail">
    <!-- 顶部导航 -->
    <div class="detail-header">
      <div class="header-left">
        <el-image :src="apps.icon" class="logo-image" />
        <span class="brand-name">{{apps.name}}</span>
        <div class="back-btn" @click="goHome">
          <el-icon><ArrowLeft /></el-icon>
          返回首页
        </div>
      </div>
    </div>

    <div class="detail-container">
      <!-- 左侧图片和规则 -->
      <div class="detail-left">
        <div class="room-image-wrapper">
          <el-image 
            :src="http.genUrl(entity.pic)" 
            fit="cover" 
            class="main-image"
          />
        </div>
        
        <div class="rules-section">
          <h3 class="rules-title">
            <el-icon><InfoFilled /></el-icon>
            使用规则
          </h3>
          <div class="rules-content">
            <div class="rule-item">
              <div class="rule-number">1</div>
              <p>保持安静：在自习室内不得高声喧哗、交谈嘻笑，以免影响他人学习。进入自习室后应将通讯工具调为静音状态，禁止在室内拨打或接听电话。</p>
            </div>
            <div class="rule-item">
              <div class="rule-number">2</div>
              <p>维护环境卫生：不得在自习室内吃东西、喝饮料、乱丢纸屑果皮、随地吐痰或乱扔杂物。学习结束后，请自觉带走垃圾，保持桌面整洁，座椅归位。</p>
            </div>
            <div class="rule-item">
              <div class="rule-number">3</div>
              <p>合理使用资源：自习室内的桌椅为共享资源，供所有读者公平使用。禁止一人占据多个桌椅，离开时务必做到人走桌清。</p>
            </div>
            <div class="rule-item">
              <div class="rule-number">4</div>
              <p>爱护公物：不得随意移动或损坏桌椅、多媒体设备等公共设施。禁止在桌面、墙面、门窗等公共物品上乱涂乱画。</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧预约面板 -->
      <div class="detail-right">
        <div class="booking-panel">
          <div class="room-title">
            <h2>{{ entity.name }}</h2>
            <el-tag effect="plain" round>预约</el-tag>
          </div>
          
          <div class="room-location">
            <el-icon><LocationFilled /></el-icon>
            <span>{{ entity.local }}</span>
          </div>

          <div class="booking-section">
            <h3 class="section-title">选择时间段</h3>
            <el-select 
              v-model="entity.dateKey" 
              @change="selectChange" 
              class="date-select"
              placeholder="请选择日期"
            >
              <el-option 
                v-for="opt in entity.dateList" 
                :key="opt" 
                :value="opt" 
                :label="opt"
              />
            </el-select>

            <div class="time-slots">
              <el-tag
                v-for="(sp,i) in entity.timeSpanList"
                :key="i"
                :type="sp.zwCount - sp.useCount > 0 ? 'primary' : 'info'"
                :effect="sp.zwCount - sp.useCount > 0 ? yuyue.id == sp.id ? 'dark' : 'plain' : 'plain'"
                class="time-slot-tag"
                @click="change(sp)"
                :class="{ 'disabled': sp.zwCount - sp.useCount <= 0 }"
              >
                {{ sp.key }}
                <span class="seats-left" v-if="sp.zwCount - sp.useCount > 0">
                  (剩余{{ sp.zwCount - sp.useCount }}个)
                </span>
                <span class="seats-full" v-else>(已满)</span>
              </el-tag>
            </div>

            <el-button 
              type="primary" 
              class="submit-btn" 
              @click="submit"
            >
              立即预约 {{ yuyue.select ? `(${yuyue.select})` : '' }}
            </el-button>
          </div>

          <div class="contact-card">
            <el-card>
              <template #header>
                <div class="contact-header">
                  <el-icon><Service /></el-icon>
                  <span>管理员联系方式</span>
                </div>
              </template>
              <div class="contact-content">
                <p class="contact-time">致电时间：8:00-12:00、14:00-21:00</p>
                <div class="contact-phone">
                  <el-icon><Phone /></el-icon>
                  13799277398
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.room-detail {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.detail-header {
  padding: 20px 40px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.brand-name {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #f2f6fc;
  border-radius: 20px;
  color: #409EFF;
  cursor: pointer;
  transition: all 0.3s;
}

.back-btn:hover {
  background: #ecf5ff;
}

.detail-container {
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 20px;
  display: flex;
  gap: 30px;
}

.detail-left {
  flex: 1;
}

.room-image-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.main-image {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}

.rules-section {
  margin-top: 30px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.rules-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
  margin-bottom: 20px;
  font-size: 18px;
}

.rule-item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.rule-number {
  width: 24px;
  height: 24px;
  background: #409EFF;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.rule-item p {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

.detail-right {
  width: 400px;
}

.booking-panel {
  position: sticky;
  top: 24px;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.room-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.room-title h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.room-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #909399;
  margin-bottom: 24px;
}

.booking-section {
  padding-top: 20px;
  border-top: 1px solid #EBEEF5;
}

.section-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 16px;
}

.date-select {
  width: 100%;
  margin-bottom: 16px;
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.time-slot-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.time-slot-tag:not(.disabled):hover {
  transform: translateY(-2px);
}

.time-slot-tag.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.seats-left {
  font-size: 12px;
  opacity: 0.8;
}

.seats-full {
  font-size: 12px;
  color: #F56C6C;
}

.submit-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  margin-bottom: 24px;
}

.contact-card :deep(.el-card__header) {
  padding: 12px 16px;
}

.contact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
  font-weight: 500;
}

.contact-content {
  padding: 12px 0;
}

.contact-time {
  color: #909399;
  font-size: 13px;
  margin: 0 0 8px 0;
}

.contact-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #409EFF;
  font-size: 16px;
  font-weight: 500;
}
</style>